<div class="page-layout blank simple" fusePerfectScrollbar *ngIf="accounts">

  <div class="header accent p-24 h-160" fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="row"
       fxLayoutAlign.gt-xs="space-between center">

    <div fxLayout="column" fxLayoutAlign="center center" fxLayout.gt-xs="column" fxLayoutAlign.gt-xs="center start">
      <div fxLayout="row" fxLayoutAlign="start center">
        <a [routerLink]="['/dashboard']">
          <mat-icon class="secondary-text s-18">home</mat-icon>
        </a>
        <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
        <span class="secondary-text">{{ 'accounts' | i18n }}</span>
      </div>
      <div class="h1 mt-16">{{ 'accounts' | i18n }}</div>
    </div>
  </div>

  <div class="p-24">

    <div class="button-row">
      <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
      </mat-form-field>
      <button mat-button color="accent" class="delete" *ngIf="getSelectedAccounts().length"
              (click)="deleteSelectedAccounts()">Delete Selected
      </button>
      <button mat-button color="primary"
              (click)="router.navigate(['/login'])">New Account
      </button>
    </div>

    <mat-table #table [dataSource]="dataSource" matSort>
      <ng-container matColumnDef="type">
        <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>
          <mat-icon>bookmark_border</mat-icon>
        </mat-header-cell>
        <mat-cell *matCellDef="let account" fxHide fxShow.gt-xs>
          <ng-container *ngIf="account.type === 'offline'">
            <mat-icon class="account-type-icon" matTooltip="{{'hint_offline_account' | i18n}}">remove_red_eye</mat-icon>
          </ng-container>
          <ng-container *ngIf="account.type !== 'offline' && account.confirmed">
            <mat-icon class="account-type-icon" matTooltip="{{'hint_online_account' | i18n}}">verified_user</mat-icon>
          </ng-container>
          <ng-container *ngIf="account.type !== 'offline' && !account.confirmed">
            <mat-icon class="account-type-icon clickable" matTooltip="{{'no_public_key_activate' | i18n}}" (click)="activateAccount(account)">lock_open</mat-icon>
          </ng-container>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="account">
        <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-sm>
          <mat-icon>perm_identity</mat-icon>
          Id
        </mat-header-cell>
        <mat-cell *matCellDef="let account" fxHide fxShow.gt-sm> {{account.account}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="accountRS">
        <mat-header-cell *matHeaderCellDef mat-sort-header>
          <mat-icon>account_box</mat-icon>
          Address
        </mat-header-cell>
        <mat-cell *matCellDef="let account">
          <a [routerLink]="['/account', account.account]">{{account.accountRS}}</a>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>
          <mat-icon>account_box</mat-icon>
          Alias
        </mat-header-cell>
        <mat-cell *matCellDef="let account" fxHide fxShow.gt-xs> {{account.name}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="balanceNQT">
        <mat-header-cell *matHeaderCellDef mat-sort-header>
          <mat-icon>local_atm</mat-icon>
          {{'balance' | i18n }}
        </mat-header-cell>
        <mat-cell
          *matCellDef="let account">{{convertNQTStringToNumber(account.balanceNQT) | number:'1.0-3':this.locale }}</mat-cell>
      </ng-container>

      <ng-container matColumnDef="description">
        <mat-header-cell *matHeaderCellDef mat-sort-header fxHide fxShow.gt-xs>
          <mat-icon>description</mat-icon>
          Description
        </mat-header-cell>
        <mat-cell *matCellDef="let account" fxHide fxShow.gt-xs> {{account.description}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="selected">
        <mat-header-cell *matHeaderCellDef mat-sort-header>
          <mat-icon>keyboard_arrow_down</mat-icon>
          Selected
        </mat-header-cell>
        <mat-cell *matCellDef="let account"> {{account.selected}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="delete">
        <mat-header-cell *matHeaderCellDef mat-sort-header>
          <mat-icon>delete</mat-icon>
        </mat-header-cell>
        <mat-cell *matCellDef="let account" class="select-icon">
          <mat-checkbox [(ngModel)]="selectedAccounts[account.account]"></mat-checkbox>
        </mat-cell>
      </ng-container>


      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>
  </div>
</div>
